<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Titlesss</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/css/style.css}" href="../static/css/style.css">
    <script th:src="@{/js/jquery-2.1.1.min.js}" src="../static/js/jquery-2.1.1.min.js"></script>
    <script th:src="@{/js/bootstrap.min.js}" src="../static/js/bootstrap.min.js"></script>
</head>
<body>
<h1 align="center">用户管理-列表</h1>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <table class="table table-hover table-bordered">
                <tbody>
                <tr class="text-center">
                    <th>id</th>
                    <th>name</th>
                    <th>pass</th>
                </tr>
                <tr th:each="user : ${userList.list}">
                    <td th:text="${user.id}"></td>
                    <td th:text="${user.userName}"></td>
                    <td th:text="${user.pass}"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <nav aria-label="Page navigation" class="text-center">
                <ul class="pagination pagination-md" >
                    <li th:if="!${userList.isFirstPage}">
                        <a th:href="@{'/user/listp?pageNum=1'}">
                            首页
                        </a>
                    </li>
                    <li th:class="${userList.isFirstPage}?'disabled' : ''">
                        <a th:href="@{'/user/listp?pageNum=' + ${userList.prePage}}">上一页</a>
                    </li>
                    <li th:if="${userList.pageNum - 2 >=1}" >
                        <a th:href="@{'/user/listp?pageNum=' + ${userList.pageNum - 2}}" th:text="${userList.pageNum - 2}"></a>
                    </li>
                    <li th:if="${userList.pageNum - 1 >=1}" >
                        <a th:href="@{'/user/listp?pageNum=' + ${userList.pageNum - 1}}" th:text="${userList.pageNum - 1}"></a>
                    </li>
                    <li class="active">
                        <a th:href="@{'/user/listp?pageNum=' + ${userList.pageNum}}" th:text="${userList.pageNum}"></a>
                    </li>
                    <li th:if="${userList.pageNum + 1 <=userList.pages}" >
                        <a th:href="@{'/user/listp?pageNum=' + ${userList.pageNum + 1}}" th:text="${userList.pageNum + 1}"></a>
                    </li>
                    <li th:if="${userList.pageNum+2 <=userList.pages}" >
                        <a th:href="@{'/user/listp?pageNum=' + ${userList.pageNum+2}}" th:text="${userList.pageNum +2}"></a>
                    </li>
                    <li th:class="${userList.pageNum==userList.pages}?'disabled' : ''" >
                        <a th:href="@{'/user/listp?pageNum=' + ${userList.pageNum + 1}}">
                            下一页
                        </a>
                    </li>
                    <li th:if="!${userList.isLastPage}">
                        <a th:href="@{'/user/listp?pageNum=' + ${userList.pages}}">
                            尾页
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>


</body>
</html>